<template>
    <main-wrap ref="mianEle" :loading="true" :load="onLoad" bodyBg="none" 
    :noFixed="true" :end="page.finished" 
    :showOverTxt="page.lists.length>0" 
    :pageIndex="page.pageIndex">
        <template v-slot:header>
            <div class="adheader">
                <div class="hcon">
                    <div class="cp-zhtxt">
                        <two-tab v-model="typeId" 
                         :lists="tabList" 
                         @change="resetScroll"/>
                    </div>
                    <div><img  class="add" @click="btnUrl" src="/images/adRelease/minadd.png" /></div>
                    <div class="topSearch">
                        <div class="tswd">
                            <my-search :placeholder="search" v-model="keyword" @onSearch="resetScroll"/>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div class="main-con">
            <div class="sell-tabSearchBox">
                <div class="item" :class="{'selected':sellType==4}" @click="getTypeData(4)"><span v-t="'collection.tab5'">All</span>({{totalObj.ALL || 0}})</div>
                <div class="item" :class="{'selected':sellType==3}" @click="getTypeData(3)"><span v-t="'collection.tab6'">Hold</span> ({{totalObj.ownerNotSell || 0}})</div>
                <div class="item" :class="{'selected':sellType==0}" @click="getTypeData(0)"><span v-t="'collection.tab7'">Direct Sale</span> ({{totalObj.DIRECT || 0}})</div>
                <div class="item" :class="{'selected':sellType==1}" @click="getTypeData(1)"><span v-t="'collection.tab8'">Auction</span> ({{totalObj.AUCTION || 0}})</div>
            </div>
            <goods-list :lists="page.lists" @onClick="openDetail"/>
            <empty v-if="page.finished && page.lists.length<1"/>
        </div>
    </main-wrap>
    <my-dailog v-model:show="showFlag" :showtopclose="true" :styleType="5">
            <detail :id="itemDetail.bornId" :detail="itemDetail" @close="showFlag=false"/>
    </my-dailog>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance, provide,onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import {useRoute,useRouter} from 'vue-router'
import mainWrap from '@/components/mainWrap.vue'
import {toast,myOverlay,H5CallAPPFuction} from '@/utils/common.js'
import oneTab from '@/components/oneTab.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import myTab from '@/components/myTab.vue';
import goodsList from '@/components/goodsList.vue';
import detail from '../components/detail.vue'
import myDailog from '@/components/myDailog.vue'
import twoTab from '@/components/twoTab.vue'
import empty from '@/components/empty.vue'
export default {
    components:{
        mainWrap,
        oneTab,
        mySearch,
        Image,
        myTab,
        goodsList,
        detail,
        myDailog,
        twoTab,
        empty
    },
    setup(){
        const store = useStore()
        const route = useRoute()
        const router = useRouter()
        const {t} = useI18n()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            keyword:'',
            page:{
                lists:[],
                pageIndex:1,
                pageSize:20,
                finished: false
            },
            showFlag:false,
            typeId:1,
            countryLists:[],
            countryId:'',
            sellType:4,
            itemDetail:{},
            totalObj:{},
            st1:'',
            st2:'',
            tabList:[
            {id:1,name:t('collection.tab1')},
            {id:8,name:t('collection.tab2')},
            {id:3,name:t('collection.tab3')},
            {id:5,name:t('collection.tab4')} ],
            search:t('public.search')
        })

        provide('detailPopClose',()=>{state.showFlag=false})  // 向子组件传递关闭详情弹窗方法

        onMounted(()=>{
            myOverlay.open()
            if(route.query.id){
                // 直接打开对应id的详情弹窗
                state.itemDetail.bornId = route.query.id
                state.showFlag = true
            }
            state.st1 = setTimeout(()=>{onLoad()},3000)
        })

        onBeforeUnmount(()=>{  // 销毁组件
            myClearTimeOut()
        })

        const myClearTimeOut = ()=>{
            clearTimeout(state.st1)
            clearTimeout(state.st2)
        }

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                state.st2 = setTimeout(async () => {
                    const res = await store.dispatch("collection/get_collection_list", {
                        keyWork: state.keyword,
                        limit: state.page.pageSize,
                        page: state.page.pageIndex,
                        nftType:state.typeId, // 分类 1:城市地标,2:广告位,3:道具,4;游戏,5:其它
                        orderField: '',
                        orderType: '',
                        scope:state.sellType,// 范围 0-直售 1-拍卖，3-持有，4-全部
                        userAddress:state.userInfo.walletAddress
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    state.totalObj = res.totalRow
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    myOverlay.close()
                    resolve(true);
                }, 500);
            });
        }

        const openDetail = item=>{
             router.push({path:'/ad/detailCollection',query:{queryName:JSON.stringify(item)}})
            // state.itemDetail = item
            // state.showFlag = true
        }   
          const btnUrl = item=>{
               try {
                H5CallAPPFuction('createDc','')   
                } catch (error) {
                    toast('调用app失败')
                } 
            // router.push({path:'/ad/addCollection'})
            // state.itemDetail = item
            // state.showFlag = true
        }     
        const resetScroll = async()=>{
            myOverlay.open()
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            myClearTimeOut()
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const getTypeData = (index)=>{
            state.sellType = index
            resetScroll()
        }

        return {
            ...toRefs(state),
            onLoad,
            openDetail,
            resetScroll,
            getTypeData,
            btnUrl
        }
    }
}
</script>

<style lang="scss" scoped>
    .adheader{
         padding: 15px 30px 15px 0;
        .hcon{
            display: flex;
            height: 80px;
            line-height: 80px;
            align-items: center;
            em{
                display: block;
                font-size: 34px;
                font-style: normal;
                text-shadow: -1px 0px 0px rgba(0,209,255,0.7000), 1px 0px 0px rgba(255,0,184,0.7000);
                //-webkit-background-clip: text;
                //-webkit-text-fill-color: transparent;
            }
            .sort{
                padding: 0 0 0 30px;
            }
            .topSearch{
                flex: 1;
                // display: flex;
                // justify-content: end;
                .tswd{
                    float:right;
                    width: 550px;
                }
            }
        }
    }
    .main-con{
        padding: 10px 0 0 0;
    }
    .add{
        height:35px;
        width:35px;
        vertical-align: middle;
        margin-left:10px;
    }
    .sell-tabSearchBox{
        display: inline-block;
        height: 55px;
        background: url(/images/gloabAdSplace/tsc.png) left top no-repeat;
        background-size: 100% 100%;
        padding: 0 30px 0 0;
        .item{
            display: inline-block;
            padding:0 0 0 30px;
            line-height: 55px;
            font-weight: 500;
            color: rgba(255,255,255,0.5000);
            font-size: 24px;
            &.selected{
                color: #fff;
                font-weight: bold;
            }
        }
    }

</style>